import * as THREE from 'three'
import { LineSegments } from 'three'
import createApp from '../../core'

function createEdgesGeometry (dom: HTMLElement) {
  const { camera, scene, update } = createApp(dom)
  camera.position.set(0, 0, 100)

  const box = createBoxEdges()
  box.position.set(-80, 30, 0)
  scene.add(box)

  const cone = createConeEdges()
  cone.position.set(-30, 30, 0)
  scene.add(cone)

  const cyliner = createCylinderEdges()
  cyliner.position.set(30, 30, 0)
  scene.add(cyliner)

  const dpdecahedron = createDodecahedronEdges()
  dpdecahedron.position.set(80, 30, 0)
  scene.add(dpdecahedron)

  const meshs = [box, cone, cyliner, dpdecahedron]
  update((time: number) => {
    const angle = time / 2000

    meshs.forEach(mesh => {
      mesh.rotation.set(angle, angle, 0)
    })
  })
}

// 创建一个正方体的轮廓
function createBoxEdges () {
  const box = new THREE.BoxGeometry(20, 20, 20)
  const geometry = new THREE.EdgesGeometry(box)
  const material = new THREE.LineBasicMaterial({ color: 0xffffff })
  const edges = new THREE.LineSegments(geometry, material)
  return edges
}

// 创建圆锥轮廓线
function createConeEdges () {
  const cone = new THREE.ConeGeometry(10, 20)
  const geometry = new THREE.EdgesGeometry(cone)
  const material = new THREE.LineBasicMaterial({ color: 0x0000dd })
  const edges = new LineSegments(geometry, material)
  return edges
}

// 创建圆柱轮廓
function createCylinderEdges () {
  const cylinder = new THREE.CylinderGeometry(10, 20, 30, 10, 10)
  const geometry = new THREE.EdgesGeometry(cylinder)
  const material = new THREE.LineBasicMaterial({ color: 0x00ffff })
  const edges = new THREE.LineSegments(geometry, material)
  return edges
}

// 创建12面体
function createDodecahedronEdges () {
  const dodecahedron = new THREE.DodecahedronGeometry(15)
  const geometry = new THREE.EdgesGeometry(dodecahedron)
  const material = new THREE.LineBasicMaterial({ color: 0xff0000 })
  const edges = new THREE.LineSegments(geometry, material)
  return edges
}

export {
  createEdgesGeometry
}
